// 用于使用一个div显示53个折线图数据
<template>
  <el-card class="box-card pass53">
    <div
      ref="box"
      style="width:90%;height:880px;border: 1px dashed gray"
    >
      <div ref="pass53Box"></div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { onMounted, computed, ref, watch, onUnmounted, inject } from "vue";
import { option } from "./pass53";
import * as echarts from "echarts";
import { chartssize } from "@/utils/functions";

// import { useRouter } from 'vue-router';
// import { useStore } from 'vuex';
export default {
  name: "Pass53",
  setup() {
		const reload:any = inject('reload')

    // const Router = useRouter();
    // const Store = useStore();
    const pass53Box = ref<any>(null);
    const box = ref<any>(null);
    const myEchart = ref(<any>null);
    onMounted(() => {
      chartssize(box.value, pass53Box.value);
      myEchart.value = echarts.init(pass53Box.value);
      myEchart.value.setOption(option);
      window.onresize = () => {
        chartssize(box.value, pass53Box.value);
        reload()
      };
    });
    onUnmounted(() => {
      myEchart.value.clear();
      myEchart.value.dispose();
    });

    return { pass53Box, box };
  },
};
</script>

<style lang="scss" scoped>
.pass53 {
  width: 100%;
}
</style>
